<template>
   <div id="clock">
        <p class="date">{{ date }}</p>
        <p class="time">{{ time }}</p>
        
    </div>
</template>

   

    <script>
     
        export default{
          name:'myClock',
          data(){
            return{
              time:'17:24:30',
              date:'24',
              week : ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            }
          },
          
          mounted:function(){
    
          setInterval(this.updateTime, 1000);
          this.updateTime();
          },
         
          methods:{
          zeroPadding:function(num, digit){
            var zero = '';
            for (var i = 0; i < digit; i++) {
                zero += '0';
            }
            return (zero + num).slice(-digit);
        }
        ,
          updateTime:function(){
            var cd = new Date();
            this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
            this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + this.week[cd.getDay()];
          }

          }
        


          
        }

        
    </script>

    <style scoped>
  @charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono");


body {
    background: #0f3854;
    background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
    background-size: 100%;
}

p {
    margin: 0;
    padding: 0;
}

#clock {
   
    font-family: "Share Tech Mono", monospace;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #2b8c4a;
    text-shadow: 0 0 20px #46b117, 0 0 5px rgba(19, 220, 82, 0);
}

#clock .time {
    letter-spacing: 0.05em;
    font-size: 80px;
    padding: 5px 0;
}

#clock .date {
    letter-spacing: 0.1em;
    font-size: 24px;
}

#clock .text {
    letter-spacing: 0.1em;
    font-size: 12px;
    padding: 20px 0 0;
}


    </style>



